<template>
  <div class="user-poster flex">
    <div class="org-tree">
      <organization @onSearch="searchFun" :statisticalType="2" :statisticsNum="'posterNumber'"></organization>
    </div>
    <div class="integral-content">
      <p class="org-text">
        <span>{{ orgCheck.title }}</span>
      </p>
      <div class="flex flex-horizontal-between choose-tab">
        <div>
          <div class="flex flex-vertical-center" style="min-width: 300px">
            <span class="check-time">推广时间：</span>
            <DatePicker
              type="daterange"
              :clearable="true"
              @on-change="dateChoose"
              @on-clear="dateClear"
              ref="oselect"
              placeholder="请选择时间"
              v-model="dateTime"
              :options="options"></DatePicker>
          </div>
        </div>
        <div style="height: 50px; padding-top: 10px">
          <Button type="primary" v-if="unlocking('0207030101')" @click="exportShort" :disabled="total == 0">
            导出
          </Button>
        </div>
      </div>
      <dt-grid ref="table" page :onFetch="onFetch" :cellHeight="60" />
    </div>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
    <dt-loading :loading="loading" />
  </div>
</template>
<script>
  import columnOpt from './opt/columns'
  import apiMgr from './opt/index'
  import organization from '../components/organzation.vue'
  export default {
    components: {
      organization
    },
    data() {
      return {
        orgCheck: {},
        exportParams: {},
        showIndex: 0,
        preViewImg: [],
        loading: false,
        total: 0,
        dateTime: [],
        options: {
          disabledDate(date) {
            return date && date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
          }
        },
        startTime: '',
        endDate: ''
      }
    },
    mounted() {
      this.loading = true
    },

    methods: {
      exportShort() {
        apiMgr.exportListData(this.exportParams)
      },
      searchFun(orgCheck) {
        if (orgCheck) {
          this.orgCheck = { ...orgCheck }
        }
        this.$refs.table.init(this, new columnOpt(this))
        this.$refs.table.fetch()
      },
      onFetch(data) {
        let params = {
          startDate: this.startTime ? this.startTime + ' 00:00:00' : '',
          endDate: this.endTime ? this.endTime + ' 23:59:59' : '',
          ...this.orgCheck,
          ...data
        }
        this.exportParams = params
        return apiMgr.getListData(params).then((res) => {
          this.loading = false
          this.total = res.total
          return res
        })
      },
      delFun(data) {
        this.$Modal.confirm({
          title: '提示',
          content: '是否确认要删除该案场海报？',
          okText: '确认',
          cancelText: '取消',
          width: '450',
          onOk: () => {
            apiMgr.delById({ posterId: data.id }).then((res) => {
              this.$Message.success('删除成功')
              this.$refs.table.fetch()
            })
          }
        })
      },
      lookImg(val) {
        this.preViewImg = val
        this.$refs.preViewImage.show()
      },
      dateChoose(val) {
        if (val[0] == '' || val[1] == '') {
          return false
        }
        if (this.$tool.dateDiff(val[0], val[1]).Y >= 2) {
          this.dateTime = []
          this.$Message.info('自定义日期跨度至多两年')
          this.initDateFun(2)
          return false
        }

        this.startTime = val[0]
        this.endTime = val[1]
        this.$refs.table.fetch()
      },
      dateClear() {
        this.startTime = ''
        this.endTime = ''
        this.$refs.table.fetch()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .user-poster {
    padding: 20px;
    .integral-content {
      width: calc(100% - 270px);

      .org-text {
        margin: 10px 0;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
    .check-time {
      word-break: keep-all;
      padding: 0 5%;
      color: #666;
      height: 50px;
      line-height: 50px;
      max-width: 100px;
    }
  }
</style>
